<template>
  <div class="FaceDialog">
    <el-dialog title="整容信息维护" :visible.sync="$parent.DialogFace" width="800" height="800" v-dialogDrag border
               @close="closeDialog()">
      <el-row>
        <label style="line-height: 40px; height: 40px;">根据收费项目或单价检索：
          <el-input v-model="search"></el-input>
        </label>
      </el-row>
      <div style="height: 500px;overflow-y: auto;margin-top:20px;">
        <el-table :disabled="saveFlag"
                  ref="multipleTable"
                  :data="tables"
                  stripe
                  :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
                  tooltip-effect="dark"
                  style="width: 100%;"
                  @row-click="handleRowClick"
                  @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="80">
          </el-table-column>
          <el-table-column align='center' prop="itemName" label="收费项目" min-width="150">
          </el-table-column>
          <el-table-column
            prop="itemPrice"
            align='right'
            label="单价"
            width="80">
            <template slot-scope="{row,$index}">
              <input class="edit-cell" v-if="row.asFixPrice !=1"
                     type="number" onkeyup="value = value.match(/^\d+(?:.\d{0,2})?/)" v-model="row.itemPrice">
              <label class="edit-cell" v-if="row.asFixPrice ==1">{{ row.itemPrice }}</label>
            </template>
          </el-table-column>
          <el-table-column
            prop="itemNumber"
            align='right'
            label="数量"
            min-width="80">
            <template slot-scope="{row,$index}">
              <input class="edit-cell" v-model="row.itemNumber"
                     onkeyup="value=(value.match(/^\d*(\.?\d{0,2})/g)[0]) || null">
            </template>
          </el-table-column>
          
          <el-table-column
            prop="itemUnit"
            align='center'
            label="单位"
            width="80">
          </el-table-column>
          <el-table-column
            prop="itemCharge"
            align='right'
            label="项目金额"
            min-width="80">
            <template slot-scope="{row,$index}">
              {{
                Number((row.itemPrice.match(/^\d+(?:.\d{0,2})?/)) * (row.itemNumber.match(/^\d+(?:.\d{0,2})?/))).toFixed(2)
              }}
            </template>
          </el-table-column>
          <el-table-column
            prop="discountCharge"
            align='right'
            label="优惠"
            min-width="80">
            <template slot-scope="{row,$index}">
              <input class="edit-cell" onkeyup="value= (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null"
                     v-model="row.discountCharge">
            </template>
          </el-table-column>
          <el-table-column
            prop="itemSurplusNum"
            align="center"
            label="物品剩余量"
            min-width="120">
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: right">
        <el-button type="primary" @click="Save()">保 存</el-button>
        <el-button type="primary" plain @click="$parent.DialogFace = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as Type from '@/api/service'
import {dataFormate} from '@/utils/index'
import {toFixed} from "@/utils/tofixed"

export default {
  name: "FaceDialog",
  props: {
    FaceItems: {
      type: Array,
    },
    DialogFace: {
      type: Boolean,
      default: false
    },
    businessCode: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      saveFlag: false,     //保存过程中不可更改,true为正在保存
      formLabelWidth: '120px',
      multipleSelection: [],
      search: "",
      onpresscTime: 0  //  阻止短时间内连续点击
    }
  },

  watch: {
    '$parent.DialogFace'() {
      if (this.$parent.DialogFace == false) {
        this.search = ""
        this.$nextTick(() => {
          this.$refs.multipleTable.clearSelection();
        })
      }
    }
  },
  methods: {
    //表格行点击事件
    handleRowClick(row, column, event){
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    //保存
    Save() {
      if ((Date.now() - this.onpresscTime) > 2000) {
        this.onpresscTime = Date.now()
        console.log(Date.now())
      } else {
        return
      }

      //定义发送明细
      let postSelection = [];
      if (this.multipleSelection.length > 0) {
        this.multipleSelection.forEach((item, index) => {
          //定义明细项
          let postItem = {};
          let itemPrice = Number(item.itemPrice);
          let itemNumber = Number(item.itemNumber);
          let discountCharge = Number(item.discountCharge);
          // postItem.id = 0;
          postItem.businessCode = this.businessCode;
          postItem.serviceItemId = item.id;
          postItem.itemName = item.itemName;
          postItem.itemPrice = toFixed(Number(itemPrice), 2);
          postItem.itemNumber = toFixed(Number(itemNumber), 2);
          postItem.discountCharge = toFixed(Number(discountCharge), 2);
          postItem.itemUnit = item.itemUnit;
          //实际费用就是数量*价格减
          postItem.itemCharge = toFixed(Number(itemPrice * itemNumber), 2);
          postItem.realityCharge = toFixed(Number(postItem.itemCharge));
          postItem.chargeTime = dataFormate(new Date());
          postItem.asSettled = 0;
          postItem.chargeSettleId = item.chargeSettleId;
          postItem.randomCode = item.randomCode;
          postItem.version = item.version;
          postSelection[index] = postItem;
        })
      } else {
        this.$message("请选择")
        return
      }
      this.saveFlag = true
      let postData = {
        "businessCode": this.businessCode,
        "goodsServices": postSelection
      }
      Type['savefacelift'](postData).then(response => {
        let result = response;
        const {data} = result
        if (!data) {
          this.multipleSelection = data.goodsServices;
        }
        this.$message('保存数据成功')
        this.$parent.DialogFace = false
        this.saveFlag = false
      }).catch(error => {
        this.$message(error)
        this.saveFlag = false
      })
    },


    closeDialog() {
      this.$parent.DialogFace = false
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  },
  computed: {
    // 模糊搜索
    tables() {
      const search = this.search
      if (search) {
        // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
        // 注意： filter() 不会对空数组进行检测。
        // 注意： filter() 不会改变原始数组。
        return this.FaceItems.filter(data => {
          // some() 方法用于检测数组中的元素是否满足指定条件;
          // some() 方法会依次执行数组的每个元素：
          // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
          // 如果没有满足条件的元素，则返回false。
          // 注意： some() 不会对空数组进行检测。
          // 注意： some() 不会改变原始数组。
          {
            return Object.keys(data).some(key => {
              // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
              // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
              if (key == "itemName" || key == "itemPrice") {
                return String(data[key]).indexOf(search) > -1
              }
            })
          }

        })
      }
      return this.FaceItems
    }
  },
}
</script>
<style>
.FaceDialog .el-dialog__title, .FaceDialog .el-dialog__headerbtn .el-dialog__close {
  color: white;
}

.FaceDialog .el-dialog {
  width: 800px !important;
}

.FaceDialog .el-input, .FaceDialog .el-select, .FaceDialog .el-form-item__content {
  width: 9vw;
  min-width: 140px !important;
}

.FaceDialog .el-textarea__inner {
  width: 40vw;
  min-width: 640px;
}
</style>
<style scoped>

.tablewrapper {
  display: flex;
}

.tablewrapper .table {
  display: inline-block;
  flex: 1;
  width: 50%;
  padding: 0 1em;
  border: 1px solid rgb(220, 223, 230);
}

.tablewrapper .table .title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 3rem;
}

.tablewrapper .table .tablecont {
  padding: 1em;
  line-height: 2em;
  text-indent: 2em;
}

</style>

